<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>亚马逊电影</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="/static/canvasjs-2.3.2/canvasjs.min.js"></script>
        <script src="/static/bootstrap-paginator.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <span th:text="共有xxx条记录"></span>
                            <span>
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#compare">
                                    比较
                                </button>
                            </span>
                        </div>
                    </div>
                    <table class="table ">
                        <thead>
                            <tr>
                                <th scope="col" th:each="attr:${attrs}" th:text="${attr}"></th>
                            </tr>
                        </thead>
                        <tbody id="content">
<!--                            <tr th:each="values:${object}">-->
<!--                                <td th:each="value:${values}" th:text="${value}"></td>-->
<!--                            </tr>-->
                        </tbody>
                    </table>
                    <ul class="pagination"></ul>
                </div>
            </div>
        </div>
        <div class="modal fade" id="compare" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="chartContainer" style="height:400px; width: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        window.onload = function () {

            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2", // "light1", "light2", "dark1", "dark2"
                title: {
                    text: "三种数据库性能对比"
                },
                axisY: {
                    title: "查询时间 (s)",
                    suffix: "s",
                    includeZero: false
                },
                axisX: {
                    title: "数据库"
                },
                data: [{
                    type: "column",
                    yValueFormatString: "#,##0.00#\"s\"",
                    dataPoints: [
                        { label: "hive", y: [[${hiveTime}]], indexLabel: "[[${hiveCount}]]"},
                        { label: "mysql", y: [[${mysqlTime}]], indexLabel: "[[${mysqlCount}]]"},
                        { label: "neo4j", y: [[${neo4jTime}]], indexLabel: "[[${neo4jCount}]]"},
                    ]
                }]
            });
            chart.render();

            $('.pagination').bootstrapPaginator({//将id为pageLimit的ul元素设置为分页插件
                currentPage: 1,//设置当前页码
                size: "small",//设置控件的显示大小，
                bootstrapMajorVersion: 3,//当前版本
                alignment: "right",//设置控件的对齐方式
                totalPages: Math.ceil(objects.length/pageSize),//设置总页数.
                itemTexts: function (type, page, current) {//控制每个操作按钮的显示文字。是个函数，有3个参数: type, page, current。
                    //通过这个参数我们就可以将操作按钮上的英文改为中文，如first-->首页，last-->尾页。
                    switch (type) {
                        case "first": return "首页" + " <li class='page-item page-link'></li>";
                        case "prev": return "<" + " <li class='page-item page-link'></li>";
                        case "next": return ">" + " <li class='page-item page-link'></li>";
                        case "last": return "末页" + " <li class='page-item page-link'></li>";
                        case "page": return page + " <li class='page-item page-link'></li>";
                    }
                },
                onPageClicked: function (event, originalEvent, type, page) {//为操作按钮绑定click事件。
                    paging(page-1)
                }
            });
        }
    </script>
    <script th:inline="javascript">
        var objects = [[${object}]]
        console.log(objects)
        var pageSize = 100
        function paging(pageNum){
            var content = $('#content')
            content.empty()
            for (var i = pageNum * pageSize; i < (pageNum+1)*pageSize && i < objects.length; i++){
                var tr = $("<tr></tr>")
                for (var j = 0; j < objects[i].length; j++){
                    var td = $("<td></td>").text(objects[i][j])
                    tr.append(td)
                }
                content.append(tr)
            }
        }
        paging(0)
    </script>
</html>
